<template>
  <div class="wdfw">
    <Card>
      <div slot="cRight" style="margin-right: 20px">
        <el-button type="primary" size="mini" @click="dialogVisible = true">
          新增服务
        </el-button>
      </div>
      <div slot="cRight">
        <el-input v-model="valA" placeholder="搜索服务" size="small"></el-input>
      </div>
      <section>
        <Table :tableData="tableData" @btnClick="dialogVisibleA = true"></Table>
        <Pagination :total="tableData.row.length"></Pagination>
      </section>
    </Card>

    <el-dialog
      close="dialog"
      title="新增服务"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Xzfw @selectJx="innerVisible = true" />
        <section style="float: right">
          <el-button
            type="primary"
            @click="
              dialogVisible = false
              addTableData()
              $message({
                message: '发布成功',
                type: 'success'
              })
            "
            >保存</el-button
          >
          <el-button type="primary" @click="dialogVisible = false"
            >取消</el-button
          >
        </section>
      </el-scrollbar>
      <el-dialog
        width="50%"
        title="选取镜像"
        :visible.sync="innerVisible"
        append-to-body
        top="10vh"
      >
        <Jxxq />
      </el-dialog>
    </el-dialog>

    <el-dialog
      close="dialog"
      title="服务更新"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Fwgx />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Xzfw from './components/Xzfw'
import Jxxq from './components/Jxxq'
import Fwgx from './components/Fwgx'
export default {
  components: {
    Card,
    Table,
    Pagination,
    Xzfw,
    Jxxq,
    Fwgx
  },

  data() {
    return {
      valA: '',
      dialogVisible: false,
      innerVisible: false,
      dialogVisibleA: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '名称'
          },
          {
            prop: 'colC',
            label: '发布者'
          },
          {
            prop: 'colD',
            label: '版本'
          },
          {
            prop: 'colE',
            label: '所属分区'
          },
          {
            prop: 'colF',
            label: '时间'
          },
          {
            prop: 'colG',
            label: '备注'
          },
          {
            prop: 'colH',
            label: '状态'
          },
          {
            prop: 'colI',
            label: '操作',
            type: 'Button',
            width: '300px',
            btnList: [{ label: '修改' }, { label: '克隆' }, { label: '删除' }]
          }
        ],
        row: [
          {
            colA: '3689',
            colB: 'config-server-host',
            colC: 'bboss-tag-1',
            colD: 'v3',
            colE: 'hhf-serr.conf...',
            colF: '2020-03-01 11:46:55',
            colG: 'nginx',
            colH: '已发布'
          },
          {
            colA: '3690',
            colB: 'abs-server-config',
            colC: 'bboss-tag-1',
            colD: 'v3',
            colE: 'hhf-serr.conf...',
            colF: '2019-12-01 13:46:55',
            colG: 'abs-web',
            colH: '已发布'
          },
          {
            colA: '3691',
            colB: 'abs-server-config',
            colC: 'bboss-tag-1',
            colD: 'v3',
            colE: 'hhf-serr.conf...',
            colF: '2020-03-01 19:07:55',
            colG: 'abs-config',
            colH: '已发布'
          }
        ]
      }
    }
  },

  methods: {
    addTableData() {
      this.tableData.row.push({
        colA: '3692',
        colB: 'bboss-server-api',
        colC: 'bboss-tag-1',
        colD: 'v3',
        colE: 'hhf-serr.conf...',
        colF: '2020-01-01 18:30:24',
        colG: 'abs-avs',
        colH: '已发布'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  height: 71vh;
}
</style>
